<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Shopping list example</title>
    <style>
      li {
        margin-bottom: 10px;
      }

      li button {
        font-size: 8px;
        margin-left: 20px;
        color: #666;
      }
    </style>
  </head>
  <body>

    <h1>My shopping list</h1>

    <div>
      <label for="item">Enter a new item:</label>
      <input type="text" name="item" id="item">
      <button onclick="addItem()">Add item</button>
    </div>

    <ul>
       <!-- <li><span>12312</span><button onclick="deleteTheDom(this)">Delete</button></li> -->
    </ul>


    <script>
      /**
      要求：
      1、点击additem 将输入框中的文字放置列表中，并将输入框清空
      2、不允许输入空值 ，空值提示
      3、列表中的行点击delete按钮可实现删除该行
      4、刷新页面将输入框清空
      5、10章内容，dom节点可以随意添加属性
      6、截至下周二前
      **/
	  
	  //1.2.3.4
	  var ul01 =  document.getElementsByTagName("ul")[0];
	  var input01 = document.getElementById("item");
	  
      function addItem(){
		  if(input01.value != ""){
			var li = document.createElement("li"),
				span = document.createElement("span"),
				spanText = document.createTextNode(input01.value),
				button = document.createElement("button"),
				buttonText =document.createTextNode("Delete");
			
			button.setAttribute("onclick", "deleteTheDom(this)" );
			button.appendChild(buttonText );
			span.appendChild(spanText);
			li.appendChild(span);
			li.appendChild(button);
			ul01.appendChild(li)
			input01.value ="";
		  }else{
			  alert("不允许输入空值");
		  }
      }
      function deleteTheDom(_ob){
        //_ob指向当前节点
		_ob.parentNode.parentNode.removeChild(_ob.parentNode);
      }
	  
	  //5.dom节点可以随意添加属性
	  //方法一:
	  ul01.setAttribute( "id", "customUL01" );
	  console.log(ul01.attributes);
	  //方法二:
	  var nameAttr = document.createAttribute("name");
	  nameAttr.value = "nameIsUL01";
	  ul01.setAttributeNode(nameAttr);
	  
	  console.log(ul01.attributes["name"].value);
	  console.log(ul01.getAttributeNode("name").value);
	  console.log(ul01.getAttribute("name"));
	  
	  

    </script>
  </body>
</html>